<template>
    <div>
        <h3>发表评论</h3> 
        <hr>  
        <textarea style="height:75px" placeholder="请输入要BB的内容" maxlength="120" v-model="writeText"></textarea>
        <mt-button type="primary" size="large" @click="submit">发表评论</mt-button>
        <div class="text" v-for="(item,i) in okdata" :key='item.id'>
            <div class="head">第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time | solveTime}}</div>
            <div class="body">{{ item.content }}</div>
        </div>
        <mt-button type='danger' plain size='large' @click='adddata'>加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
    export default{
        data(){
            return{
                  pageindex:1,
                  okdata:[],
                  writeText:'',
                  myid:this.$route.params.id
                  
            }
        },
        created() {
            this.showdata()
        },
        methods:{
               showdata(){
                   this.$http.get('api/getcomments/'+this.myid+'?pageindex='+this.pageindex).then(data=>{
                          if(data.body.status===0){
                             this.okdata=this.okdata.concat(data.body.message)
                          }else{
                              Toast('获取评论失败')
                          }
                   })
               },
               adddata(){
                   this.pageindex++
                   this.showdata()
               },
               submit(){
                   if(this.writeText.trim().length===0){
                      return Toast('逼逼内容不能为空')
                   }else{
                   this.$http.post('api/postcomment/'+this.myid,{content:this.writeText}).then(data=>{
                          if(data.body.status===0){
                              var fresh = { user_name:'匿名用户',add_time:new Date() ,content:this.writeText}
                              this.okdata.unshift(fresh)
                              Toast('逼逼内容发表成功')
                          }else{
                              Toast('发表失败')
                          }
                   })
                   }
               }
        },
        props:['sonid']
    }
</script>

<style lang="less" scoped>
textarea{
    margin: 0;
}
.text{
    margin: 13px 0;
    .head{
        background-color:gray;
        line-height: 35px;
        font-size: 13px;

    }
    .body{
         line-height: 35px;
           font-size: 13px;
    }

}
</style>
